<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <title>租金分期</title>
    <link href="//cdn.bootcss.com/weui/1.0.2/style/weui.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/jquery-weui/0.8.2/css/jquery-weui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../main.css">
</head>
<body>

    <div id="container"></div>

    <script type="text/html" id="tenant-index">
        <div class="weui-toptips weui-toptips_warn js_tooltips">请输入姓名</div>
        <div class="inn-tip">您需填写真实信息，否则将影响申请分期。</div>

        <form>
        <input id="openId" type="hidden" name="openId">
        <!-- 姓名 -->
        <div class="weui-cell inn-fchild">
            <div class="weui-cell__hd">
                <label class="weui-label">姓名</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="name" name="name" type="text" placeholder="请输入您的姓名">
            </div>
        </div>

        <!-- 性别 -->
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="gender" class="weui-label">性别</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" id="gender" name="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>

        <!-- 联系电话 -->
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">联系电话</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="phone" name="phone" type="tel" placeholder="请输入11位手机号码">
            </div>
        </div>

        <!-- 身份证照片（正反面） -->
        <!-- <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <p class="weui-uploader__title">身份证照片（正反面）</p>
                <div class="weui-uploader__info">查看示例</div>
              </div>
              <div class="weui-uploader__bd">
                <div class="weui-uploader__input-box">
                  <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                </div>
              </div>
              <div class="weui-uploader__ft">最多可上传2张</div>
            </div>
          </div>
        </div> -->

        <!-- 每月房租 -->
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">每月房租</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="rental" name="rental" type="number" placeholder="请输入">
            </div>
        </div>

        <!-- 是否合租 -->
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="rentalType" class="weui-label">是否合租</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" id="rentalType" name="rentalType">
                    <option value="是">是</option>
                    <option value="否">否</option>
                </select>
            </div>
        </div>

        <!-- 所在城市 -->
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">所在城市</label>
            </div>
            <div class="weui-cell__bd inn-picker">
                <input id="province" type="hidden" name="province">
                <input id="provinceId" type="hidden" name="provinceId">
                <input id="city" type="hidden" name="city">
                <input id="cityId" type="hidden" name="cityId">
                <input id="area" type="hidden" name="area">
                <input id="areaId" type="hidden" name="areaId">
                <input class="weui-input" id="city-picker" type="text" readonly placeholder="请选择">
            </div>
        </div>

        <!-- 详细地址 -->
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" id="address" name="address" placeholder="详细地址（示例：上海市南京东路980弄4号）" rows="2"></textarea>
            </div>
        </div>

        <!-- 房东称呼 -->
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">房东称呼</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="landlordName" name="landlordName" type="text" placeholder="请输入">
            </div>
        </div>

        <!-- 房东电话 -->
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">房东电话</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="landlordPhone" name="landlordPhone" type="tel" placeholder="请输入">
            </div>
        </div>
        <div class="inn-tip inn-tip-inner">未征求您的同意，我们不会擅自联系房东</div>

        <!-- 申请按钮 -->
        <div class="weui-footer">
            <div class="weui-btn-area">
                <a class="weui-btn" href="javascript:;" id="toggleDialog">申请房租月付</a>
            </div>
        </div>

       <!--  <div id="dialog" style="opacity: 1; display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd">
                    请您联系房东<br>
                    并确认是否同意办理租金分期
                </div>
                <div class="weui-dialog__bd">
                    <div class="weui-cells weui-cells_checkbox">
                        <label class="weui-cell weui-check__label">
                            <div class="weui-cell__hd">
                                <input type="radio" class="weui-check" name="agreed" value="同意租金分期">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                <p>同意办理</p>
                            </div>
                        </label>
                        <label class="weui-cell weui-check__label">
                            <div class="weui-cell__hd">
                                <input type="radio" class="weui-check" name="agreed" value="暂不同意">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                <p>暂不同意</p>
                            </div>
                        </label>
                    </div>
                    <p>您已成功申请办理租金分期，请保持联系电话畅通，我们的服务管家将会尽快与您取得联系。</p>
                </div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default js-dialog-btn" id="no">下次再说</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary js-dialog-btn" id="yes">确定</a>
                </div>
                <div class="inn-dialog-ft">有任何疑问请咨询 400-825-9200</div>
          </div>
        </div> -->

        </form>
        <!-- 弹框 -->
        <div class="js_dialog" id="dialog" style="opacity: 1; display: none;"">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__bd">您已成功申请办理租金分期，请保持联系电话畅通，我们的服务管家将会尽快与您取得联系。</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                </div>
                <div class="inn-dialog-ft">有任何疑问请咨询 400-825-9200</div>
            </div>
        </div>
    </script>

    <script type="text/html" id="tenant-preview">
        <div class="weui-form-preview" id="agreementArea">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <p>您的房东是否同意办理租金分期</p>
                </div>
            </div>
            <div class="weui-form-preview__ft">
                <a class="weui-form-preview__btn weui-form-preview__btn_default js-agree" id="disagree" data-value="暂不同意" href="javascript:">暂不同意</a>
                <a class="weui-form-preview__btn weui-form-preview__btn_primary js-agree" id="agree" data-value="同意办理" href="javascript:">同意</a>
            </div>
        </div>

        <div class="weui-form-preview">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">姓名</label>
                    <span class="weui-form-preview__value" id="name"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">联系电话</label>
                    <span class="weui-form-preview__value" id="phone"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">每月房租</label>
                    <span class="weui-form-preview__value" id="rental"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">是否合租</label>
                    <span class="weui-form-preview__value" id="rentalType"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">所在城市</label>
                    <span class="weui-form-preview__value" id="region"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">房东称呼</label>
                    <span class="weui-form-preview__value"  id="landlordName"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">房东电话</label>
                    <span class="weui-form-preview__value" id="landlordPhone"></span>
                </div>
            </div>
        </div>

        <div class="weui-footer">
            <p class="weui-footer__links">
                有任何疑问请咨询
                <a href="tel:400-825-9200" class="weui-footer__link">400-825-9200</a>
            </p>
        </div>

        <div id="toast" style="display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">提交成功</p>
            </div>
        </div>
    </script>


    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
    <script src="../lib/city-picker.js"></script>
    <script src="../lib/util.js"></script>
    <script src="../js/tenant.js"></script>
</body>
</html>